<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>360藏品</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/waterfall.css">
</head>
<body>
<div id="header">
    <h1>360度藏品精选</h1>
</div>
<div id="container"></div>
<div id="page-navigation" class="hide clear">
    <span class="disabled page-navigation-prev" title="上一页">«上一页</span>
    <a href="?&p=1" data-target="page" data-page="1" class="cur">1</a>
    <a href="?&p=2" data-target="page" data-page="2">2</a>
    <a href="?&p=3" data-target="page" data-page="3">3</a>
    <a href="?&p=4" data-target="page" data-page="4">4</a>
    <a href="?&p=5" data-target="page" data-page="5">5</a>
    <a href="?&p=6" data-target="page" data-page="6">6</a>
    <a href="?&p=7" data-target="page" data-page="7">7</a>
    <a href="?&p=8" data-target="page" data-page="8">8</a>
    <a href="?&p=9" data-target="page" data-page="9">9</a>
    <a href="?&p=10" data-target="page" data-page="10">10</a>
    <a href="?&p=2" class="page-navigation-next"  data-page="2" title="下一页">下一页»</a>
</div><!-- #page-navigation -->
<script type="text/x-handlebars-template" id="waterfall-tpl">
{{#result}}
    <div class="item">
       <a href="{{href}}" target="_dzf"> <img title="{{name}}" src="{{image}}" width="{{width}}" height="{{height}}" /></a>
    </div>
{{/result}}
</script>
<script src="../js/lib/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars/handlebars.js"></script>
<script src="js/waterfall.js"></script>
<script src="../pics.js"></script>
<script>
function getsrc(p){
	  return "http://www.hzacm.com/dz/pic/"+p.sn+"_512/"+p.sn+"_01_files/9/0_0.jpg";
	  //return "../dz/pic/04920_512/04920_01_files/9/0_0.jpg";	  
}

$('#container').waterfall({
    itemCls: 'item',
    colWidth: 222,  
    gutterWidth: 15,
    gutterHeight: 15,
    maxPage: 5,
    checkImagesLoaded: false,
    callbacks: {
        
        loadingFinished: function($loading, isBeyondMaxPage) {
            if ( !isBeyondMaxPage ) {
                $loading.fadeOut();
            } else {
                $loading.hide();
                $('#page-navigation').show();
            }
        },
        renderData: function (data, dataType) {
            var tpl,
                template,
                resultNum = data.total;
                
            if ( resultNum < 10) {
                $('#container').waterfall('pause', function() {
                    $('#waterfall-message').html('<p style="color:#666;">no more data...</p>')
                    //alert('no more data');
                });
            }
    
            if ( dataType === 'json' ||  dataType === 'jsonp'  ) { // json or jsonp format
                tpl = $('#waterfall-tpl').html();
                template = Handlebars.compile(tpl);
    
                return template(data);
            } else { // html format
                return data;
            }
        }
    },
    path: function(page) {
        return 'data/data' + page + '.json';
    },
    
    func_data: function(page) {
    	if(page>1){
    		return {
    			"total":0
    		};
    	}
    	for(var i=0; i<pics.length; i++){
    		var p=pics[i];
    		if(!p)
    			continue;
    		pics[i]={
    			name:p.name,
    			sn:p.sn,
    			href:"http://www.hzacm.com/dz/d0.html?pic="+p.sn+"&fmt=jpg&width="+p.width+"&height="+p.height+"&size=512",
    			image:getsrc(p),
    			width: 192,
    			height: Math.floor(p.height*192/p.width)
    		};
    	}
        return {
        	"total": pics.length,
        	"result":pics
        };
    }
    
});
</script>
</body>
</html>
